<template>
  <div v-show="visible" class="q-spin">
    <spin tip="加载中...">
      <!-- <template #indicator>
        <LoadSvg />
      </template> -->
    </spin>
  </div>
</template>

<script setup lang="ts">
  import { Spin } from 'ant-design-vue'
  import LoadSvg from '@/components/qSpin/LoadSvg.vue'
  import { ref } from 'vue'

  const visible = ref(false)
  const show = (dom: HTMLElement) => {
    visible.value = true
    dom.style.transform = dom.style.transform || `translate(0)`
  }
  defineExpose({ show })
</script>

<style scoped lang="less">
  .q-spin {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(0 0 0 / 10%);

    &-svg {
      width: 60px;
      height: 60px;
    }

    .spin-text {
      color: @primary-color;
    }
  }
</style>
